<!DOCTYPE html>
<html>
<head>
<title>Contact list</title>
    {% load staticfiles %}
<link
	href="{% static 'css/bootstrap.css' %}"
	rel="stylesheet"
	media="screen">
<link
	href="{% static 'css/bootstrap-responsive.css' %}"
	rel="stylesheet"
	media="screen">
<link
	href="{% static 'css/listbox.css' %}"
	rel="stylesheet">
</head>
<body>
	<div class="container-fluid">
		<h3>
			<em>Your address book</em>
		</h3>
		<div class="row-fluid">
			<!--Side bar-->
			<div class="span4">
				<div class="btn-group">
					<button
						class="btn btn-success"
						onclick="createNewContact()">New contact</button>
					<button class="btn btn-danger">Delete contact</button>
				</div>
				<select id="contacts_list">
				</select>
                <script>
                    javascript_data = {{ data|safe }};
                    var select_element = document.getElementById('contacts_list');
                    for (var key in javascript_data)
                    {
                        select_element.options[select_element.options.length] = new Option(javascript_data[key][0], key);
                    }
                </script>
			</div>
			<!--Contact edit-->
			<div class="span8">
				<form id="profile_form" method="post" action="/create_contact/">
					<fieldset>
						<legend id="Contact_id"></legend>
						<label>Name</label>
						<input
							id="Profile_Name"
                            name="profile_name"
							type="text"
							placeholder="Name">
						<label>Surname</label>
						<input
							id="Profile_Surname"
                            name="profile_surname"
							type="text"
							placeholder="Surname">
						<label>Birthday</label>
						<input
							id="Profile_Date"
							type="date"
                            name="profile_date"
							value="2013-01-08">
						<label>Mobile Phone #</label>
						<input
							id="Profile_MP"
							type="text"
                            name="profile_mobile_phone"
							placeholder="Mobile #">
						<label
							class="checkbox inline"
							onclick="addHomeNumber()">
						<input
							type="checkbox"
							id="Profile_inlineCheckbox1"
							value="Profile_HP_checkbox"> Home phone
						</label>
						<label
							class="checkbox inline"
							onclick="addWorkNumber()">
						<input
							type="checkbox"
							id="Profile_inlineCheckbox2"
							value="Profile_WP_checkbox">Work phone
						</label>
						<label id="Profile_HPtext">Home Phone</label>
						<input
							id="Profile_HP"
							type="text"
                            name="profile_home_phone"
							placeholder="Home #">
						<label id="Profile_WPtext">Work Phone</label>
						<input
							id="Profile_WP"
							type="text"
                            name="profile_work_phone"
							placeholder="Work #">
						<label>Country</label>
						<input
							id="Profile_Country"
							type="text"
                            name="profile_country"
							placeholder="Country">
                        <label>City</label>
                        <input
							id="Profile_City"
							type="text"
                            name="profile_city"
							placeholder="City">
                        <label>Apartment</label>
                        <input
							id="Profile_Apartment"
							type="text"
                            name="profile_apartment"
							placeholder="Apartment">
					</fieldset>
				</form>
				<button
                    id="save_button"
					class="btn btn-small btn-primary"
                    onclick="SaveProfile"
					type="button">Save</button>
			</div>
		</div>
	</div>
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script src="{% static 'js/bootstrap.min.js' %}"></script>
	<script src="{% static 'js/listbox.js' %}"></script>
	<script src="{% static 'js/contactlist.js' %}"></script>

	<script>
        $('#save_button').click(function(){
          $.post($('#profile_form').attr('action'), $('#profile_form').serialize(), function(response){
                if (response['is_success'] == true)
                {
                    $('#contacts_list').append('<option value="'+ response['profile_id'] +'">'+ $('#Profile_Name').val() +'</option>');

                    javascript_data[response['profile_id']] = [
                        $('#Profile_Name').val(),
                        $('#Profile_Surname').val(),
                        '',
                        $('#Profile_Date').val(),
                        [
                            [0, 3, $('#Profile_MP').val()],
                            [0, 1, $('#Profile_HP').val()],
                            [0, 2, $('#Profile_WP').val()]
                        ],
                        [
                            [0, $('#Profile_Country').val(), $('#Profile_City').val(), '', $('#Profile_Apartment').val(), '', 1]
                        ]
                    ]

                    $('#contacts_list').attr('style','')
                    $('#contacts_list').next().remove();
                    $('#contacts_list').listbox({
                        'class' : 'class',
                        'searchbar' : true, // отображать строку поиска
                        'multiselect' : false // не использовать множественный выбор
                    })
                }
          },'json');
          return false;
        });

        $(function() {
            $('select').listbox({
                'class' : 'class',
                'searchbar' : true, // отображать строку поиска
                'multiselect' : false // не использовать множественный выбор
            })
        });
	</script>
</body>
</html>